<!DOCTYPE html>
<html>
<head>
    <title>销售统计</title>
    <script src="../echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>
<body>
<div style="width: 45%;margin-top: 90px;float: bottom;display: inline-block">
    <!-- 添加日期选择器 -->
    <div class="layui-inline">
        <label class="layui-form-label">年选择器:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="yyyy" style="border: 0.1rem outset whitesmoke;">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">月选择器:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="yyyy-MM" style="border: 0.1rem outset whitesmoke;">
        </div>
    </div>
</div>
<div style="width: 20%;margin-top: 90px;float: bottom;margin-left: -10%;display: inline-block">
    <div class="layui-inline">
        <label class="layui-form-label">日选择器:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="yyyy-MM-dd" style="border: 0.1rem outset whitesmoke;">
        </div>
    </div>
</div>
<div style="width: 100%;margin-top: 50px">
    <div id="pieChart" style="width:43.8%; height: 600px; float: left;margin-left: 0.2%;border: 0.2rem outset whitesmoke;"></div>
    <div style="width: 0.2%"></div>
    <div id="lineChart" style="width: 55%; height: 600px; float: right;margin-right: 0.2%;border: 0.2rem outset whitesmoke;"></div>
</div>

<script>
    var $=layui.$
    var pieChartdata = [];//存放饼图数据
    getPieChartData();//调用饼图数据处理方法


    var lineChartYdata = [];//存放折线图y轴数据
    var lineChartXdata = [];//存放折线图x轴数据
    var lineChartLegend = [];//存放折线图部门对应线条名称
    getLineChartData();//调用折线图数据处理方法

    //获取年份（用在标题上）
    let date = new Date();
    var theTimeOfChoice = date.getFullYear();


    // 创建饼图实例
    var pieChart = echarts.init(document.getElementById('pieChart'));
    var pieOptions = {
        title: {
            text:theTimeOfChoice + '年的 销售金额饼图:',
            subtext: '金额占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: (params) =>{
                let index = params.dataIndex;
                let obj = pieChartdata[index];
                let str = `部门:${obj.name}<br/>金额:${obj.value}<br/>成交单数:${obj.paymentNumbers}<br/>金额占比:${params.percent}%`;
                return str;
            },
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
        },
        color: ['#9ed9cc','#E0CF65','#BE78B7','#F0A732',
            '#9FC1DB','#711f01','#BE3749','#E8C4D0',
            '#F8906D','#EAB98A','#F8AFA8','#90C9B0',
            '#42555C','#FFF2DF','#72814A','#16477E',
            '#ED556A'],
        series: [
            {
                name: '部门',
                type: 'pie',
                radius: '55%',
                center: ['43%', '55%'],
                labelLine:{
                    normal:{
                        length:80
                    }
                },
                data:pieChartdata,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用配置项显示饼图
    pieChart.setOption(pieOptions);


    // 创建折线图实例
    var lineChart = echarts.init(document.getElementById('lineChart'));
    // 配置折线图选项和数据
    var lineOptions = {
        title: {
            text: theTimeOfChoice + '年每月的 日期/金额折线图:'
        },
        tooltip: {
            trigger: 'item',
            formatter: (params) =>{
               let componentIndex = params.componentIndex;
               let dataIndex = params.dataIndex;
               let obj = lineChartYdata[componentIndex];
               let paymentNumbers = obj.paymentNumbers;
               let paymentNumber = paymentNumbers[dataIndex];
               let str = `部门:${obj.name}<br/>日期:${params.name}<br/>金额:${params.value}<br/>成交单数:${paymentNumber}`;
               return str;
            },
        },
        legend: {
            type: 'plain',
            show: true,
            orient: 'horizontal',
            left:'35%',
            data:lineChartLegend,
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                //x轴文字的配置
                show: true,
                interval: 0,//使x轴文字显示全
            },
            axisTick: {                                    //坐标轴刻度设置
                show: true,                                  //是否显示坐标轴刻度
                inside: true,                              //坐标轴刻度指向        (true表示向上   false表示向下)
                alignWithLabel:true,                        //刻度线是否和标签对齐
                length: 5,                                 //坐标轴刻度长度
                lineStyle: {                                //坐标轴刻度的样式
                    color: 'black',                            //坐标轴刻度的颜色
                    width: 2,                                //坐标轴刻度的粗细程度    (用数字表示)
                    type: 'solid'                            //坐标轴刻度的类型        (可选solid  dotted  dashed)
                }
            },
            data: lineChartXdata,
        },
        yAxis: {
            type: 'value',
            splitLine: {                                //网格线
                show: true,                                  //是否显示
                lineStyle: {                                //网格线样式
                    color: '#1C1C1C',                        //网格线颜色
                    width: 1,                                //网格线的加粗程度
                    type: 'dashed'                            //网格线类型
                }
            },

        },
        color: ['#9ed9cc','#E0CF65','#BE78B7','#F0A732',
            '#9FC1DB','#711f01','#BE3749','#E8C4D0',
            '#F8906D','#EAB98A','#F8AFA8','#90C9B0',
            '#425a5c','#FFF2DF','#65814a','#16537e',
            '#ED556A'],
        series: lineChartYdata,
        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            top: '15%',
            containLabel: true,
        },

    };
    // 使用配置项显示折线图
    lineChart.setOption(lineOptions);


    // 监听日期选择器值改变事件
    layui.use('laydate',function (){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem:'#ID-laydate-type-datetime',
            type: 'date',
            done:function (value){
                //清空月份时间选择器
                $("#ID-laydate-type-month").val('');
                //清空年份时间选择器
                $("#ID-laydate-type-year").val('')

                if(value == ""){
                    pieOptions.title.text = theTimeOfChoice + "年的 销售金额饼图:";
                    lineOptions.title.text = theTimeOfChoice + "年每月的 日期/金额折线图:";
                    //调用饼图数据查询接口
                    getPieChartData();
                    // 使用配置项显示饼图
                    pieChart.setOption(pieOptions);
                    //调用折线图数据查询接口
                    getLineChartData();
                    lineChart.setOption(lineOptions);
                }else {
                    pieOptions.title.text = value + "日的 销售金额饼图:";
                    //调用饼图数据查询接口
                    getPieChartData(value,null,null);
                    // 使用配置项显示饼图
                    pieChart.setOption(pieOptions);

                    //清空折现统计图
                    lineChart.clear();
                }

            }
        });
        laydate.render({
            elem:'#ID-laydate-type-month',
            type: 'month',
            done:function (value) {
                //清空日时间选择器
                $("#ID-laydate-type-datetime").val('');
                //清空年份时间选择器
                $("#ID-laydate-type-year").val('');

                if (value == "") {
                    pieOptions.title.text = theTimeOfChoice + "年的 销售金额饼图:";
                    lineOptions.title.text = theTimeOfChoice + "年每月的 日期/金额折线图:";
                    //调用饼图数据查询接口
                    getPieChartData();
                    // 使用配置项显示饼图
                    pieChart.setOption(pieOptions);
                    //调用折线图数据查询接口
                    getLineChartData();
                    lineChart.setOption(lineOptions);
                } else {

                    pieOptions.title.text = value + "月的 销售金额饼图:";
                    lineOptions.title.text = value + "月每天的 日期/金额折线图:";

                    //调用饼图数据查询接口
                    getPieChartData(null, value, null);
                    // 使用配置项显示饼图
                    pieChart.setOption(pieOptions);
                    //调用折线图数据查询接口
                    getLineChartData(value, null);
                    lineChart.setOption(lineOptions);
                }
            }
        });
        laydate.render({
            elem:'#ID-laydate-type-year',
            type: 'year',
            done:function (value){
                //清空日时间选择器
                $("#ID-laydate-type-datetime").val('');
                //清空月份时间选择器
                $("#ID-laydate-type-month").val('');

                if(value == ""){
                    pieOptions.title.text = theTimeOfChoice + "年的 销售金额饼图:";
                    lineOptions.title.text = theTimeOfChoice + "年每月的 日期/金额折线图:";
                    //调用饼图数据查询接口
                    getPieChartData();
                    // 使用配置项显示饼图
                    pieChart.setOption(pieOptions);
                    //调用折线图数据查询接口
                    getLineChartData();
                    lineChart.setOption(lineOptions);
                }else {
                    pieOptions.title.text = value + "年的 销售金额饼图:";
                    lineOptions.title.text = value + "年每月的 日期/金额折线图:";

                    //调用饼图数据查询接口
                    getPieChartData(null,null,value);
                    // 使用配置项显示饼图
                    pieChart.setOption(pieOptions);
                    //调用折线图数据查询接口
                    getLineChartData(null,value);
                    lineChart.setOption(lineOptions);
                }
            }
        })
    });

    //饼图数据获取方法
    function getPieChartData(datetime,month,year){
        //饼图数据查询接口
        $.ajax({
            type: "POST",
            url: "/proofbargain/salesStatisticsForPieChart",
            async: false,
            dataType:"json",
            data:{"datetime":datetime,"month":month,"year":year},
            success:function(data){
                for (let i=0;i<data.length;i++){
                    let obj = new Object();
                    obj.name = data[i][0];
                    obj.value = data[i][1];
                    obj.paymentNumbers = data[i][2];
                    pieChartdata[i] = obj;
                }
            },
            error:function(data) {
                console.log(data);
            }
        });
    };
    //折线图获取数据的方法
    function getLineChartData(month,year){
        $.ajax({
            type: "POST",
            url: "/proofbargain/salesStatisticsForLineChart",
            async: false,
            dataType:"json",
            data:{"month":month,"year":year},
            success:function (data){
                for (let i=0;i < pieChartdata.length;i++){
                    let obj = new Object();
                    obj.name = pieChartdata[i].name;
                    obj.type =  'line';
                    obj.data = data[pieChartdata[i].name];
                    obj.paymentNumbers = data[pieChartdata[i].name+"PaymentNumbers"];
                    lineChartYdata[i] = obj;
                    lineChartLegend[i] = pieChartdata[i].name;
                };
                lineChartXdata.splice(0 , lineChartXdata.length);
                for (let j=0;j<data["lineChartXdata"].length;j++){
                    if (lineChartYdata[0].data.length === 12){
                        lineChartXdata[j] = j+1+"月";
                    }else {
                        lineChartXdata[j] = j+1+"日";
                    }
                };
            },
            error:function (data){
                console.log(data);
            }
        });
    };
</script>
</body>
</html>
